<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- script src="http://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></script -->
	<!-- script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script -->

	<!-- link rel="stylesheet" type="text/css" href="http://google-code-prettify.googlecode.com/svn/loader/skins/sunburst.css" -->

	<link rel="stylesheet" media="screen" href="css/jquery.handsontable.full.css"/>
	<!--link rel="stylesheet" media="screen" href="css/samples.css"/-->
	<link rel="stylesheet" media="screen" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" media="screen" href="css/bootstrap-theme.min.css"/>
	
	<link rel="stylesheet" media="screen" href="css/leaflet.css"/>
		
	<!--link rel="stylesheet" media="screen" href="css/map.css"/-->
	

	<style type="text/css">
	.debugInvisible{
		display: none;
	}
	.handsontable{
		margin:1em 0!important;
	}
	.vspaceafter{
		margin-bottom: 1em;
	}
	.tab-content {    
	    padding: 1.5em;
	    border:1px solid #ddd;
	    border-top:none;
	    border-radius: 0 0 4px 4px;
	}
	
	.xml{
		width:48% !important;
		float:left;
		border:1px solid grey; 		
		font-size: 10px; 
		overflow-x: scroll; 
		overflow-y: auto; 
		clear: none;
		margin:0 !important;
		padding:0!important;
	}
	p.xml{overflow: auto; text-align: center;font-size: 12px; border:0 none; line-height: 1.3em;}
	pre.xml{height: 90%; }
	.debug,.noborder{
		position: relative;
		width:600px;
		
		clear: both;
		padding:5px 0 0 18px; border:1px dotted grey; 
		height: 320px;
		min-height: 200px;
		min-width:300px;
	}
	#foi.debug{width:900px;}
	#foi.debug .xml{width:32% !important;}
	.noborder{height: auto;border: transparent;min-height: 10px;
		min-width:300px;}
	#capabilities{width:100% !important;}
	
	#sensor{background: transparent url("img/sensordescription.png") scroll left center no-repeat;}
	#foi{background: transparent url("img/fois.png") scroll left center no-repeat;}


	.bs-callout {	    
	    border-color: #eee;
	    border-image: none;
	    border-radius: 3px;
	    border-style: solid;
	    border-width: 1px 1px 1px 5px;
	    margin: 20px 0;
	    padding: 20px;
	}
	.bs-callout-warning {
	    border-left-color: #f0ad4e;
	}

	.bs-callout-warning h4 {
	    color: #f0ad4e;
	}
	.bs-callout h4 {
	    margin-bottom: 5px;
	    margin-top: 0;
	}
    tr.selected{
        border-left: 2px solid green;;
        background-color: #ddd;
    }

    .popover{color:#000000;}
	#map-container { height: 400px; }
	#map { height: 400px; }

    #foi_tbody td.e_foi_sf   {
        max-width: 20em;
    }
        .e_foi_sf div{
            max-width:15em;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    /* cf. https://github.com/Leaflet/Leaflet/issues/845 */
    .leaflet-control-layers-expanded {
        max-height: 300px;/*less than map height! */
        overflow: auto;
    }

	</style>

    <script src="js/spin.min.js"></script>

    <script src="js/jquery.min.js"></script>
	<script src="js/jquery.handsontable.full.js"></script>
    <!--<script src="js/jquery.spin.js"></script>-->

    <script language="javascript" src="js/bootstrap.min.js"></script>
	<script src="/jsi18n"></script>
	<!-- -->
	<script src="js/config.js"></script>
	<script src="js/ritmaresk.xsltTransformer.js"></script>
	
	<script src="js/ritmaresk.SOS.js"></script>
	<script src="js/ritmaresk.dateUtil.js"></script>
    <script src="js/ritmaresk.utils.js"></script>
	<script src="js/ritmaresk.utils.swe.js"></script>
	<script src="js/ritmaresk.utils.NamingConvention.js"></script>
	<script src="js/ritmaresk.utils.insertResultHelper.js"></script>
	



	<script type="text/javascript" src="js/leaflet.js"></script>
    <script type="text/javascript" src="js/L.TileLayer.BetterWMS.js"></script>
<!-- testing locate control for leaflet -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/L.Control.Locate.min.css" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="css/L.Control.Locate.ie.min.css"/>
    <![endif]-->

    <script src="js/L.Control.Locate.min.js" ></script>

    <script src="js/insertObservationPage.js"></script>
</head>
<body>	

	<div class="content-wrap">
	  <div class="container-internal">
        <div id="spinner" class="spinner"></div>
		<div class="vspaceafter">	
		    <!-- Nav tabs -->
		    <ul class="nav nav-tabs" role="tablist" id="wiztabs">
		      <li class="active"><a href="#procedureSelect" role="tab" data-toggle="tab" class="gettext">Select Procedure</a></li>
		      <li><a href="#foiSelect" role="tab" data-toggle="tab" class="gettext">Select Location</a></li>
		      <li><a href="#resultInsert" role="tab" data-toggle="tab" class="gettext">Insert observations</a></li>
		    </ul>
		    
		    <!-- Tab panes -->
		    <div class="tab-content">
		      <div class="tab-pane active" id="procedureSelect">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title"><span class="gettext">Select a Procedure/Sensor</span>
                            <span class="gettext tip" data-original-title="Procedure/Sensor">A sensor, system, method, algorithm or instrument which may be used in making an Observation (which may be described using SensorML)</span>
                        </h3>
					</div>
					<div class="panel-body">
						<p class="controls">
						<select class="control form-control" id="procedures"></select>
						</p>
					</div>
				</div>    
		      </div>

		      <div class="tab-pane" id="foiSelect">
				<div class="panel panel-primary">
					<div class="panel-heading">
						<h3 class="panel-title"><span class="gettext">Select one of the available "Features of Interest" or create a new one</span>
                            <span class="gettext tip" data-original-title="Feature of Interest">In the first instance the Feature Of Interest (and the Sampling Feature) describe the geographical location of the target of the Observation, but more generally a Feature Of Interest is an abstraction of real world phenomena (thing, species, person, event, geographic place, etc.).</span>
                            <!--a id="popoverOption" class="btn" href="#" data-toggle="popover" rel="popover" data-placement="bottom" data-original-title="Title"><i class="glyphicon glyphicon-question-sign" aria-hidden="true"></i></a-->
                        </h3>


					</div>
					<div class="panel-body">
						<div id="map"></div>
							
						<div class="table-responsive">
							<table class="table table-bordered" id="select_foi">
								<thead>
								    <tr>
                                        <th class="" rowspan="2" style="vertical-align:top;">
                                            <span class="gettext">Name</span>
                                            <span class="gettext tip" data-original-title="Name">A descriptive name for the Feature Of Interest</span>
                                        </th>
                                        <th class="" colspan="3" style="vertical-align:top;">
                                            <span class="gettext">Sampling point</span>
                                            <span class="gettext tip" data-original-title="Sampling Point">The sampling position</span>
                                        </th>
                                        <th class="" rowspan="2" style="vertical-align:top;">
                                            <span class="gettext">Sampled Feature (URI)</span>
                                            <span class="gettext tip" data-original-title="Sampled Feature">Is the feature of the Sampling Feature, providing the ultimate context for the Observation. A Sampling Feature provides the direct context for the specific Observation (spatial, specimen etc.).</span>
                                        </th>
                                        <th class="gettext" rowspan="2" style="vertical-align:top;">Action</th>
								    </tr>
                                    <tr>
                                        <!--<th class="gettext">Name</th-->
                                        <th class="gettext" style="padding-top:0; padding-bottom: 0;">Lat.</th>
                                        <th class="gettext" style="padding-top:0; padding-bottom: 0;">Lon.</th>
                                        <th class="gettext" style="padding-top:0; padding-bottom: 0;">SRS</th>
                                        <!--th class="gettext">Sampled Feature</th-->
                                        <!--th class="gettext">Use</th-->
                                    </tr>
								</thead>
								<tbody id="foi_tbody">
								    <tr id="featureOfInterest_new">
									<td><input type="text" id="foi_name" class="control form-control" required="required"></td>
									<td><input type="text" id="foi_x" class="control form-control" required="required"></td>
									<td><input type="text" id="foi_y" class="control form-control" required="required"></td>
									<td>
										<select id="foi_srs" required="required" class="control form-control">
                                            <!-- TODO: activate other CRS after having verified the 52north SOS4 coordinate transformation -->
											<!--<option value="http://www.opengis.net/def/crs/EPSG/0/4230">ed50</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/23032">ed50/utm 32n</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/23033">ed50/utm 33n</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/4258">etrs89</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/3035">etrs89/etrs-laea</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/3034">etrs89/etrs-lcc</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/3044">etrs89/etrs-tm32</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/3045">etrs89/etrs-tm33</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/25832">etrs89/utm-zone32N</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/25833">etrs89/utm-zone33N</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/4670">igm95</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/3064">igm95/utm 32n</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/3065">igm95/utm 33n</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/4265">roma40</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/3004">roma40/est</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/3003">roma40/ovest</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/4806">roma40/roma</option>-->
											<option value="http://www.opengis.net/def/crs/EPSG/0/4326" selected="selected">wgs84</option>										
											<!--<option value="http://www.opengis.net/def/crs/EPSG/0/32632">wgs84/utm 32n</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/32633">wgs84/utm 33n</option>
											<option value="http://www.opengis.net/def/crs/EPSG/0/32634">wgs84/utm 34n</option>-->
										</select>
									</td>
									<td><input type="text" id="foi_sf" class="control form-control">
                                        <span class="tip gettext" style="color:blue;">You can use the map to choose (by left click) a Sampled Feature from the local WFS (activate the WFS layers with the layers control in the map)</span></td>
									<td><button  class="btn btn-success gettext" onclick="newFoi();">Use</button></td>
								    </tr>
									
								</tbody>
						    </table>
                            <h3 class="gettext">Tips</h3>
                            <ul>
                                <li class="gettext"><i class="glyphicon glyphicon-question-sign" aria-hidden="true"></i>You can input the coordinates for a new feature right clicking on the map</li>
                                <li class="gettext">You can use the map to choose (by left click) a Sampled Feature from the local WFS</li>
                                <li><img src="js/images/marker-icon-2x.png" alt="existing FoI markers" style="width:1em;height:auto;">
                                    <span class="gettext">Features of Interest already inserted for the chosen Sensor/Procedure are displayed on the map. Click their marker to obtain more info</span>
                                </li>
                                <li><img src="css/images/layers-2x.png" alt="map control layer" style="width:1em;height:auto;">
                                    <span class="gettext">Use the control layer on the map to show/hide layers</span>
                                </li>
                            </ul>
                        </div>
					    
					    <!-- -->
					</div>
					
					<!--form id="tab_foi" role="form"-->
					<!--/form-->
				</div>
		      </div>

		      <div class="tab-pane" id="resultInsert">		      	
		      		<!--<select id="chooseInputDateFormat" class="control form-control"></select>-->
		      		<div  class="panel panel-primary vspaceafter">
		      			<div class="panel-heading ">
		      				<h3 class="panel-title gettext">Insert data</h3>
		      			</div>
		      			<div class="panel-body">
		      				<p class="gettext">Fill in the data manually or paste them from a spreadsheet, without headings.
		      					Please check the order of columns here proposed.
		      					</p>
		      				<div class="well well-sm">
		      					<button class="btn btn-default btn-sm gettext" onclick='$("#notaDate").toggleClass("hidden");'>Show accepted date-time formats.<i class="icon-question-sign"></i></button>
					      		<div id="notaDate" class="hidden">
					      			<br/>
							      	<p><h4 class="gettext">REMARK - accepted date-time formats.</h4>
							      	<span class="gettext">Timestamp fields (date and time) like "phenomenon time" or "result time" require values expressed in ISO 8601 format. The table in this page admits also date and time time values in one of the following formats, that will be automatically converted in the standard format. The use of different timestamps formats could lead to unexpected errors. Please check the conversion before submitting your data.</span>
							      	 <br/> 
							      		<ul>
							      		<li>YYYY-MM-DDTHH:mm:ss (standard ISO 8601)</li>
							      		<li>DD/MM/YYYY HH:mm:ss</li>
							      		<li>DD/MM/YYYY HH:mm</li>
							      		<li>DD/MM/YYYY HH.mm.ss</li>
							      		<li>DD/MM/YYYY HH.mm</li>
							      		</ul>
							      	</p>
						      	</div>
					      	</div>

					      	<div class="row">
					      		<div class="col-md-2">
					      		    <button role="submit" name="insertResult" class="btn btn-primary btn-sm gettext">save data</button>

					      		</div>
					      		<div class="col-md-10 resultTime bs-callout bs-callout-warning">				      			
					      			<label for="resultTime" class="gettext">ResultTime</label>
					      			<p class="gettext">Please check the result time (i.e. the time when the result became available). Change it if different from the last phenomenonTime (default).</p>
					      			<input type="text" id="resultTime" class="control form-control"/>
					      			<br/>
					      		</div>
				      		</div>
				      		<div class="handsontable" id="insertResultTable"></div>
				      		
				      		<button role="submit" name="insertResult" class="btn btn-primary btn-sm gettext">save data</button>
                            <button role="submit" name="resetTable" class="btn btn-warning btn-sm gettext">reset table</button>
			      		</div>
		      		</div>
		      		<div  class="vspaceafter">
		      			<div id="insertResultTableLegend" class="panel panel-default"></div>
		      		</div>
		      </div>
		    </div>
		</div>


		<div class="clearfix debugInvisible">	
			<!-- -->
			<div class="tab-pane" id="resultInsert">		      	
		  		<!--<select id="chooseInputDateFormat" class="control form-control"></select>-->
		  		<div  class="panel panel-default vspaceafter">
		  			<div class="panel-heading ">
		  				<h3 class="panel-title">Sensor Observation Service - debug</h3>
                        <h4 id="sosEndpoint"></h4>
		  			</div>
		  			<div class="panel-body">
					    <div id="capabilitiesContainer" class="debug">
						    <pre id="capabilities" class="xml prettyprint lang-json"></pre>			    
					    </div>		    
				    	<h2 id="sensorid"></h2>
				    	<!-- <div class="container"><p class="xml" style="margin:0">json</p><p class="xml" style="margin:0">xml</p></div> -->
				    	<div id="sensor" class="debug">
						    <p class="xml" style="margin:0 10px;">json</p><p class="xml" style="margin:0 10px;">xml</p>
						    <!-- <div class="verticalLabel"><p>sensorDescription</p></div> -->
						    <pre id="sensordescription" class="xml prettyprint lang-json"></pre>
						    <pre id="sensordescription_xml" class="xml prettyprint lang-xml"></pre>
				    	</div>
					    <div id="foi" class="debug">
						    <p class="xml" style="margin:0 10px;">json</p>
						    <p class="xml" style="margin:0 10px;">xml</p>
						    <p class="xml" style="margin:0 10px;">json new</p>
						    <!-- <div class="verticalLabel"><p>features of interest</p></div> -->
						    <pre id="foi_json" class="xml prettyprint lang-json"></pre>
						    <pre id="foi_xml" class="xml prettyprint lang-json"></pre>
						    <pre id="foi_json_new" class="xml prettyprint lang-json"></pre>
					    </div>
					    <div id="insertResult" class="debug">
					    	<p class="xml" style="width:100%!important;">prepare insert result template</p>
						    <pre id="insertResultTemplate" class="xml prettyprint lang-xml" style="width:98%!important;"></pre>
				    	</div>
					</div>
				</div>
			</div>
			<!-- -->
		</div>

	  </div>
	</div>
</body>